Angular Material এর Drag and Drop ফিচার ব্যবহার করে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে একটি ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য উপযোগী ড্র্যাগ এবং ড্রপ ফিচার সহজেই ইমপ্লিমেন্ট করতে পারেন। এই ফিচারটি বিভিন্ন উপাদানকে এক জায়গা থেকে অন্য জায়গায় ড্র্যাগ ও ড্রপ করার মাধ্যমে ব্যবস্থা নিয়ন্ত্রণ করতে সহায়তা করে।

Angular Material এর CDK Drag and Drop একটি সহজ এবং শক্তিশালী উপায় সরবরাহ করে যা ড্র্যাগ এবং ড্রপ কার্যকারিতা দ্রুত এবং কার্যকরভাবে অ্যাপ্লিকেশনে যুক্ত করতে পারে।

Angular CDK Drag and Drop ব্যবহারের জন্য প্রস্তুতি

১. MatDragAndDropModule ইমপোর্ট করা

প্রথমে আপনাকে @angular/cdk/drag-drop মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    DragDropModule
  ]
})
export class AppModule { }

এখানে DragDropModule ইনস্টল করা হয়েছে, যা ড্র্যাগ এবং ড্রপ কার্যকারিতার জন্য প্রয়োজনীয় সেবা সরবরাহ করে।

ড্র্যাগ এবং ড্রপ ইমপ্লিমেন্ট করা

২. HTML টেমপ্লেট তৈরি করা

এখন, HTML টেমপ্লেটে cdkDrag এবং cdkDrop ডিরেকটিভ ব্যবহার করে ড্র্যাগ এবং ড্রপ ফিচার প্রয়োগ করা যেতে পারে।

এটি একটি সিম্পল ড্র্যাগ এবং ড্রপ ডেমো:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div cdkDrag *ngFor="let item of items" class="example-box">
    {{item}}
  </div>
</div>

এখানে:

• cdkDropList: এটি একটি এলিমেন্ট যা ড্রপ টার্গেট হিসেবে কাজ করে।
• cdkDrag: এটি একটি এলিমেন্ট যা ড্র্যাগ করার উপাদান হিসেবে কাজ করে।
• (cdkDropListDropped): এই ইভেন্টটি ট্রিগার হয় যখন একটি উপাদান ড্র্যাগ করে এবং ড্রপ করা হয়।

৩. কম্পোনেন্ট ক্লাসে ড্র্যাগ এবং ড্রপ ফাংশন ইমপ্লিমেন্ট করা

এখন কম্পোনেন্ট ক্লাসে ড্র্যাগ এবং ড্রপ ফাংশনটি ইমপ্লিমেন্ট করতে হবে, যা ড্র্যাগড উপাদানকে পরিচালনা করবে।

import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop',
  templateUrl: './drag-drop.component.html',
  styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent {
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  drop(event: CdkDragDrop<string[]>) {
    const previousIndex = this.items.indexOf(event.item.data);
    const currentIndex = event.currentIndex;

    // List item reorder
    moveItemInArray(this.items, previousIndex, currentIndex);
  }
}

এখানে:

• CdkDragDrop: এটি ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডল করার জন্য ব্যবহৃত হয়।
• moveItemInArray: এটি একটি Angular CDK ইউটিলিটি ফাংশন যা একটি অ্যারের মধ্যে আইটেমকে পুনর্বিন্যাস করে।

৪. CSS স্টাইলিং

টেক্সট, বোতাম, বা অন্যান্য উপাদান গুলো স্টাইল করতে CSS ব্যবহার করা যেতে পারে। ড্র্যাগ এবং ড্রপ উপাদানের জন্য স্টাইল যুক্ত করতে:

.example-list {
  width: 200px;
  max-height: 400px;
  border: solid 1px #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.example-box {
  padding: 10px;
  margin: 5px;
  background-color: #e0e0e0;
  border-radius: 5px;
  cursor: move;
}

এখানে:

• example-list: এটি ড্রপ তালিকা এবং উপাদানগুলির জন্য স্টাইল।
• example-box: এটি ড্র্যাগgable আইটেমের জন্য স্টাইল।

লিস্ট অর্ডার কাস্টমাইজেশন

আপনি চাইলে ড্র্যাগ এবং ড্রপ অপারেশনের জন্য অর্ডার পরিবর্তন করতে পারেন এবং ফাংশনালিটি আরো উন্নত করতে পারেন। এর মাধ্যমে আপনি আইটেমগুলির অবস্থান পরিবর্তন করে ডেটা সংরক্ষণ বা অন্য কোনো কার্যকরী কাস্টমাইজেশন করতে পারেন।

উদাহরণ: আইটেম রিয়অর্ডার করা

এটি moveItemInArray ফাংশন দিয়ে করতে পারেন, যা উপাদানের অবস্থান পরিবর্তন করে:

import { moveItemInArray } from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

টেন্ডেম ড্র্যাগ এবং ড্রপ (Nested Drag and Drop)

আপনি Nested Drag and Drop প্রয়োগ করতে চাইলে, উপাদানগুলোর মধ্যে একাধিক স্তর তৈরি করতে পারেন। উদাহরণস্বরূপ:

<div cdkDropList [cdkDropListData]="items" class="list" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of items" cdkDrag>
    <div>{{item.name}}</div>
    <div cdkDropList [cdkDropListData]="item.children" (cdkDropListDropped)="drop($event)">
      <div *ngFor="let child of item.children" cdkDrag>{{child.name}}</div>
    </div>
  </div>
</div>

এখানে, একটি অভ্যন্তরীণ cdkDropList আছে যা আইটেমের মধ্যে nested ড্র্যাগ এবং ড্রপ অনুমোদন করে।

Angular Material এর Drag and Drop ফিচার একটি অত্যন্ত কার্যকরী টুল, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও স্বতঃস্ফূর্ত ও উপযোগী করে তোলে। CDK Drag and Drop ব্যবহারের মাধ্যমে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে ড্র্যাগ এবং ড্রপ কার্যকারিতা অত্যন্ত সহজভাবে বাস্তবায়ন করতে পারবেন। এটি লেজি লোডিং, নেস্টেড ড্র্যাগ, এবং ফ্লেক্সিবল ডেটা পরিচালনা সমর্থন করে, যা বড় অ্যাপ্লিকেশনগুলোতে পারফরম্যান্স উন্নত করতে সহায়তা করে।